<template>
  <div class="house">
    <div class="search">
      楼宇名称：
      <el-input
        style="width: 145px; padding-right:10px"
        placeholder="请输入楼宇名称"
        prefix-icon="el-icon-search"
        v-model="searchData.buildingName">
      </el-input>

      小区单元：
      <el-input
        style="width: 145px;"
        placeholder="请输入小区单元"
        prefix-icon="el-icon-search"
        v-model="searchData.unit">
      </el-input>

      <el-button style=" float: right; margin-left:10px;" @click="reset">重置</el-button>
      <el-button style=" float: right;" type="primary" @click="onSubmit">查询</el-button>
    </div>

    <div class="do" v-if="user.position === 2">
      <el-button style="margin-left:10px;" @click="dialogFormVisible = true">新增</el-button>
      <el-button @click="batchDelete()">批量删除</el-button>
    </div>

    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    stripe
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="buildingName"
      label="楼宇名称">
    </el-table-column>
    <el-table-column
      prop="unit"
      label="小区单元">
    </el-table-column>
    <el-table-column
      prop="usableArea"
      label="总使用面积"
      show-overflow-tooltip>
      <template #default="{ row }">
        {{ row.usableArea }} ㎡
      </template>
    </el-table-column>
    <el-table-column
      prop="roomNumber"
      label="间数"
      show-overflow-tooltip>
      <template #default="{ row }">
        {{ row.roomNumber }} 间
      </template>
    </el-table-column>
    <el-table-column
      prop="layersNumber"
      label="层数"
      show-overflow-tooltip>
      <template #default="{ row }">
        {{ row.layersNumber }} 层
      </template>
    </el-table-column>
    <el-table-column v-if="user.position === 1 || user.position === 2" label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          v-if="user.position === 2"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>

    <div class="block" style="margin-top: 20px; text-align: right; margin-right: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <HouseFormPop class="houseFormPop" @updateFormData="updateFormData" :title.sync="title" :formData="updateTableData" v-show="dialogFormVisible" :visible.sync="dialogFormVisible"></HouseFormPop>
  </div>
</template>

<script>
import api from '@/api';
import HouseFormPop from './HouseFormPop.vue';
import { mapState,mapMutations } from "vuex"

export default {
  computed:{
      ...mapState("login",["user"])
    },
    components: {
      HouseFormPop,
    },
    data() {
      return {
        title: '新增楼宇',
        currentPage: 1,
        total:100,
        pageSize:10,
        dialogFormVisible: false,
        searchData:{
          buildingName: '',
          unit:'',
          pageNow: 1,
        },
        tableData: [{
          buildingName: '状元楼',
          unit: '一单元',
          usableArea:'1㎡',
          roomNumber:'1间',
          layersNumber: '20层'
        }],
        selectedRow:[],
        updateTableData:{
          buildingName: '',
          unit: '',
          usableArea: '',
          layersNumber: '',
          roomNumber: ''
        }
      }
    },
    methods: {
      updateFormData(data){
        this.updateTableData = data;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
         this.searchData.pageNow = val
         //获取楼宇信息
         this.onSubmit();
      },
      handleSelectionChange(selection) {
          this.selectedRow = selection
      },
      handleEdit(index, row) {
        this.updateTableData = row;
        this.dialogFormVisible = true;
        this.title = '编辑楼宇'
      },
      handleDelete(index, row) {
        api.buildDelete(row.id).then(res =>{
            if(res.type === 'error'){
                this.$message.error(res.message)
            }else if(res.data.code === 200){
              this.$message.success('删除成功');
              this.tableData.splice(index,1)
            }else{
              this.$message.error(res.data.message)
            }
        })
      },
      //批量删除
      batchDelete(){
        var deleteIds = '';
          this.selectedRow.map(item =>{
            if(deleteIds === ''){
              deleteIds = item.id
            }else{
              deleteIds = deleteIds + "," + item.id
            }
          })
          if(deleteIds === ''){
            this.$message.error("请勾选删除项")
            return;
          }
        api.buildDelete(deleteIds).then(res =>{
            if(res.type === 'error'){
                this.$message.error(res.message)
            }else if(res.data.code === 200){
              console.log('删除成功');
              this.selectedRow.map(item =>{
                  const index = this.tableData.findIndex((data) => data.id === item.id);
                  this.tableData.splice(index,1)
              })
            }else{
              this.$message.error(res.data.message)
            }
        })
      },
      onSubmit() {
        //获取楼宇信息
        api.buildList(this.searchData).then(res =>{
            if(res.type === 'error'){
                this.$message.error(res.message)
            }else if(res.data.code === 200){
              this.tableData = res.data.data.buildInfos
              this.total = res.data.data.total
            }else{
              this.$message.error(res.data.message)
            }
        })
      },
      // 重置
      reset(){
        this.searchData.buildingName = '',
        this.searchData.unit = '',
        this.onSubmit();
      }
    },
    created () {
      //获取楼宇信息
      this.onSubmit();
    },
}
</script>
<style scoped>
.house{
  background-color: #fff;
}
.house .search{
  padding: 10px;
}
.house .do{
  padding: 10px;
}
/* 自定义遮罩层样式 */
.house .houseFormPop {
  background-color: rgba(0, 0, 0, 0.5); /* 遮罩层颜色 */
  z-index: 9999; /* 设置一个较高的 z-index 使遮罩层位于最上层 */
}
</style>